<template>
  <div>
    <div class="home-header">
      <div class="header-top">

        <div class="company-info">
          <img :src="headerImg" alt="公司Logo" class="logo" />
        </div>
        <div class="search-bar">
          <el-input placeholder="产品搜索" v-model="searchText" class="search-input" />
          <el-button :icon="Search" @click="onSearch"
            style="background-color: #1b4e54; border-color: #1b4e54;color:#fff"></el-button>
        </div>
      </div>
      <el-menu mode="horizontal" background-color="#1b4e54" text-color="#fff" active-text-color="#ffd04b"
        class="nav-bar" :class="{ 'nav-fixed': isFixed }" :default-active="$route.path">
        <el-menu-item v-for="route in filteredMenuRoutes.beforeAbout" :key="route.path" :index="route.path"
          @click="handleMenuClick(route)">
          {{ route.meta?.title || route.name }}
        </el-menu-item>
        <el-menu-item v-if="aboutRoute" :key="aboutRoute.path" :index="aboutRoute.path"
          @click="handleMenuClick(aboutRoute)">
          {{ aboutRoute.meta?.title || aboutRoute.name }}
        </el-menu-item>
        <el-sub-menu v-if="productsRoute" index="/products">
          <template #title>
            {{ productsRoute.meta.title }}
          </template>
          <el-menu-item v-for="item in productSubMenus" :key="item.id" @click="handleProductSubMenuClick(item.id)">
            {{ item.name }}
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-for="route in filteredMenuRoutes.afterAbout" :key="route.path" :index="route.path"
          @click="handleMenuClick(route)">
          {{ route.meta?.title || route.name }}
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 占位元素，防止内容跳动 -->
    <div v-if="isFixed" class="nav-placeholder" :style="{ height: navHeight + 'px' }"></div>
  </div>
</template>

<script>
import headerImg from './img/header.jpg'
import {
  Search
} from '@element-plus/icons-vue'
export default {
  name: 'HomeHeader',
  data() {
    return {
      headerImg,
      Search,
      searchText: '',
      menuRoutes: [],
      isFixed: false,
      navHeight: 0,
      scrollThreshold: 100, // 滚动阈值
      productSubMenus: [
        { name: '徽章', id: 11 },
        { name: '奖牌', id: 12 },
        { name: '钥匙扣', id: 13 },
        { name: '书签', id: 14 },
        { name: '纪念币', id: 15 },
        { name: '奖杯', id: 16 },
        { name: '冰箱贴', id: 17 },
        { name: '挂件/钥匙链', id: 18 },
        { name: '纪念盘', id: 19 },
        { name: '开瓶器', id: 20 },
        { name: '袖扣/领带夹', id: 21 },
        { name: '挂件/贴牌', id: 22 }
      ]
    }
  },
  mounted() {
    console.log(this.logoUrl)
    this.initMenuRoutes()
    this.calculateNavHeight()
    this.initScrollListener()
  },
  beforeUnmount() {
    this.removeScrollListener()
  },
  computed: {
    filteredMenuRoutes() {
      const beforeAbout = []
      const afterAbout = []
      let foundAbout = false
      for (const route of this.menuRoutes) {
        if (route.name === 'About') {
          foundAbout = true
          continue
        }
        if (route.name === 'Products') continue
        if (!foundAbout) beforeAbout.push(route)
        else afterAbout.push(route)
      }
      return { beforeAbout, afterAbout }
    },
    aboutRoute() {
      return this.menuRoutes.find(route => route.name === 'About')
    },
    productsRoute() {
      return this.menuRoutes.find(route => route.name === 'Products')
    }
  },
  methods: {
    onSearch() {
      this.$message.info(`搜索内容：${this.searchText}`)
    },
    handleMenuClick(route) {
      // 为路由添加默认的 id 参数
      let defaultId = '1'
      if (route.meta.defaultId) {
        defaultId = route.meta.defaultId
      }
      const routePath = route.path.includes(':id')
        ? route.path.replace(':id?', defaultId)
        : route.path

      this.$router.push(routePath)
    },
    handleProductSubMenuClick(id) {
      this.$router.push(`/products/${id}`)
    },
    initMenuRoutes() {
      // 从路由配置中获取需要显示在菜单中的路由
      this.menuRoutes = this.$router.getRoutes().filter(route => {
        return route.meta && route.meta.showOnTab
      })
    },
    calculateNavHeight() {
      // 计算导航菜单的高度
      this.$nextTick(() => {
        const nav = this.$el.querySelector('.nav-bar')
        if (nav) {
          this.navHeight = nav.offsetHeight
        }
      })
    },
    initScrollListener() {
      // 添加滚动监听
      window.addEventListener('scroll', this.handleScroll, { passive: true })
    },
    removeScrollListener() {
      // 移除滚动监听
      window.removeEventListener('scroll', this.handleScroll)
    },
    handleScroll() {
      // 处理滚动事件
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
      this.isFixed = scrollTop > this.scrollThreshold
    }
  }
}
</script>

<style scoped>
.home-header {
  width: 100%;
  background: #fff;
}

.nav-bar {
  background: #1b4e54;
  border-bottom: none;
  display: flex;
  justify-content: center;
  transition: all 0.3s ease;
}

.nav-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  animation: slideDown 0.3s ease;
}

.nav-placeholder {
  width: 100%;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

.header-top {
  width: 1170px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  background: #fff;
  margin: 0 auto;
}

.logo {
  margin: auto;

}

.company-info {
  text-align: center;
}

.company-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 15px;
}

.company-name {
  font-size: 2rem;
  font-weight: bold;
  color: #22565c;
  line-height: 1.2;
}

.company-en {
  color: #888;
  font-size: 1rem;
  margin-top: 2px;
}

.search-bar {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 40px;
}

.search-input {
  width: 180px;
  margin-right: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-top {
    width: 100%;
    flex-direction: column;
    padding: 15px 0;
    gap: 15px;
  }

  .company-info {
    order: 1;
  }

  .logo {
    width: 120px;
    height: auto;
  }

  .search-bar {
    order: 2;
    margin: 0;
    width: 100%;
    max-width: 300px;
  }

  .search-input {
    width: 100%;
    flex: 1;
  }

  .nav-bar {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0 10px;
  }

  .nav-bar .el-menu-item {
    padding: 0 8px;
    font-size: 14px;
  }

  .nav-bar .el-sub-menu__title {
    padding: 0 8px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .header-top {
    padding: 10px 0;
  }

  .logo {
    width: 320px;
  }

  .search-bar {
    max-width: 90%;
  }

  .nav-bar {
    padding: 0 5px;
  }

  .nav-bar .el-menu-item {
    padding: 0 5px;
    font-size: 13px;
  }

  .nav-bar .el-sub-menu__title {
    padding: 0 5px;
    font-size: 13px;
  }
}
</style>
